let time = 0;
let autoTimer = null;
// 匀速运动：t 已经运动的时间，b 起始位置，c 总距离 d 总时间
const linear = function linear(t, b, c, d) {
  return c * t / d +b
}


// transform translate不会触发回流
// 元素定位，脱离文档流，对其他文档影响很小
autoTimer = setInterval(() => {
  time += 17;
  if(time >=1000) {
    clearInterval(autoTimer)
    box.style.transform = `translateX(300px)`
    return
  }
  let cur = linear(time, 0, 300, 1000);
  box.style.transform = `translateX(${cur})px`
}, 17)